<template>
  <div>
      <el-table
                stripe
               border
      :data="orderList"
      style="width: 100%"
      height='450px'>
      <el-table-column
        type="index"
        label='#'
        >
      </el-table-column>
       <el-table-column
        label='订单编号'
        prop='order_number'
        >
      </el-table-column>
         <el-table-column
        label='订单价格'
        prop='order_price'
        >
      </el-table-column>
         <el-table-column
        label='是否付款'
        >
        <template #default='{row}'>
                    <el-tag type='danger' v-if="row.pay_status==='0'">未付款</el-tag>
                    <el-tag type='primary' v-else>已付款</el-tag>
        </template>
      </el-table-column>
       <el-table-column
        label='是否发货'
        prop='is_send'
        >
      </el-table-column>
         <el-table-column
        label='下单时间'
        >
        <template #default='{row}' >
            {{row.create_time|tansformDate}}
        </template>
      </el-table-column>
           <el-table-column
        label='操作'
        >
        <el-button type='primary' icon='el-icon-edit' size='mini' @click="showEditDialogVisible=true">编辑</el-button>
        <el-button type='success' icon='el-icon-location' size='mini'>位置</el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[5,8,10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 对话框 -->
      <el-dialog
  title="添加商品"
  :visible.sync="showEditDialogVisible"
  width="50%"
    >
 <el-form :model="editForm" ref="editForm" label-width="100px" >
  <el-form-item
    label="省市区/县"
    prop="addressId"
  >
       <!-- 级联选择器 -->
                   <el-cascader
                   style="width:100%"
    v-model="editForm.addressId"
    :options="cityData"
    :props="options"
    clearable
    ></el-cascader>
  </el-form-item>
  <el-form-item
    label="详细地址"
    prop="address"
  >
  <el-input v-model="editForm.address"></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showEditDialogVisible=false">取 消</el-button>
    <!-- 提交添加的属性 -->
    <el-button type="primary" @click="showEditDialogVisible=false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {getOrderListByAxios} from 'network/axios'
import cityData from '../citydata'
export default {

            data(){
                return {
                    cityData,
                    orderList:[],
                    config:{
                        query:'',
                        pagenum:1,
                        pagesize:10
                    },
                    //总数
                    total:30,
                     // 级联选择器的配置
                options:{
                        expandTrigger:'hover',
                        label:'label',
                        children:'children',
                        emitPath:false
                },
                showEditDialogVisible:false,
                editForm:{
                    addressId:[],
                    address:''
                }
                }
            },
            created(){
                this.getOrderList()
            },
            methods:{
                    getOrderList(){
                        getOrderListByAxios(this.config).then(result=>{
                          const {data:res}=result
                          this.orderList=res.data.goods
                          this.total=res.data.total
                     
                        })
                    },
                    handleSizeChange(pagesize){
                        this.config.pagesize=pagesize
                        this.getOrderList()
                    },
                    handleCurrentChange(pagenum){
                        this.config.pagenum=pagenum
                        this.getOrderList()
                    }
            }
}
</script>

<style lang="less" scoped>
            .el-table{
                margin-top:20px;
                margin-bottom: 20px;
                }
            .el-pagination{
                text-align: center;
            }
</style>
